<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>
	</head>
	<style>
		body{
		    background-image: url(img/j.jpg);
		   /* background-size: cover;
		    background-position: center; */
		}
		.dl{
			margin-top: 300px;
		}
		.el-form-item__label{
			color: black;
		}
	</style>
	<style>
	</style>
	<body>
		<div id="app">
			<center>
				<div style="width: 500px;" class="dl">
					<h2 style="text-align: center;">
						<i class="el-icon-loading"></i>
						登录
						<i class="el-icon-loading"></i>
					</h2>
					<el-form ref="user" :model="user" label-width="80px">
						<el-form-item label="用户名">
							<el-input v-model="user.uname"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input type="password" v-model="user.upwd"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">登录</el-button>
							<el-button type="primary" @click="clink">重置</el-button>
						</el-form-item>
						<el-form-item>
							未有账号点击此处<a href="#" @click="sign">注册</a>
						</el-form-item>
					</el-form>
				</div>
			</center>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				user: {
					uname: '',
					upwd: ''
				}
			},
			methods: {
				onSubmit() {
					console.log(this.user);
					if(this.user.uname==null||this.user.upwd==null||this.user.uname==''||this.user.upwd==''){
						this.$message.error('登录失败,用户名和密码不能为空');
					}else{
					axios.get(API+'login',{
						params:{
							uname:this.user.uname,
							upwd:this.user.upwd
						}
					})
					.then(function(res) {
						console.log(res);
						// alert(JSON.stringify(res))
						if (res.data.code==200) {
								let jwt= res.data.data.jwtToken;
								//把token存到本地存储
								window.localStorage.setItem("token",jwt);
								window.location.href = 'index.html';
							}
						else {
							    this.$message.error('登录失败，请检查用户名和密码');
							}
					});
					}
				},
				clink(){
					this.user= {
					uname: '',
					upwd: ''
				}
				},
				sign(){
					window.location.href="registration.html";
				}
			},
		})
	</script>
</html>